<template>
  <div>
    <header>
      <el-col class="left">
        <div class="img-wrap">
          <div style="height: 50px; line-height: 50px; font-size: 24px;">
            PLM Admin
          </div>
          <!-- <img alt="AFC" src="../assets/images/afcLogo.png" /> -->
        </div>
      </el-col>
      <!-- <el-col :span="10" class="welcome-tips">欢迎登录爱分仓后台！</el-col> -->

      <el-col :span="19"></el-col>
      <el-col :span="3">
        <!-- <div class="customer-join" @click="handleOpenService">客服介入</div> -->
      </el-col>

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img alt="Avatar" src="../assets/images/avatar2.jpg" />
          <p class="manager">
            {{manager}}
            <img alt="Avatar" src="../assets/images/down.png" class="down" />
          </p>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0">修改密码</el-dropdown-item>
          <el-dropdown-item command="1">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </header>

    <input-model
      modelTitle="联系客服"
      :isOpenModel="isOpenService"
      @handleSubmit="handleSubmit"
      @handleCancel="handleCancel"
    >
      <div class="img-title">请扫描平台公众号二维码</div>

      <div class="little-img-item">
        <div class="img-wrap">
          <img
            src="../assets/images/service.jpg"
            alt="图片"
          />
        </div>
      </div>
    </input-model>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuShow: false,
      manager: "",
      isOpenService: false, //打开弹窗
    };
  },
  components: {
    "input-model": () => import("@/components/subCon/inputModel"),
  },
  created() {},
  mounted() {
    this.getManager();
  },
  methods: {
    getManager() {
      this.manager = sessionStorage.getItem("manager")
        ? sessionStorage.getItem("manager")
        : "管理员";
    },
    handleCommand(command) {
      //退出登录，重置密码
      console.log(command);
      if (command == "1") {
        this.$router.push("/admin_login");
        sessionStorage.removeItem("sessionId");
        sessionStorage.removeItem("userId");
        sessionStorage.removeItem("manager");
        sessionStorage.removeItem("menus");
        this.$router.go(0);
      } else {
        this.$router.push("/admin_resetPwd");
      }
    },
    //打开客服介入
    handleOpenService() {
      this.isOpenService = true;
    },
    //取消
    handleCancel() {
      this.isOpenService = false;
    },
    //提交
    handleSubmit() {
      this.isOpenService = false;
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  -webkit-display: flex;
  align-items: center;
  -webkit-align-items: center;
  height: 75px;
  background-color: #fff;
  color: #1287ff;
  width: 100%;
  z-index: 999;
  font-size: 16px;
  font-weight: 700;
  position: relative;

  // position: relative;
  .manager {
    position: relative;
    padding-right: 30px;
    background-color: #fff;
    color: #101010 !important;
    img {
      position: absolute;
      width: 15px;
      height: auto;
      right: 0;
      top: 2px;
    }
    .down {
      border-radius: 0;
      top: 5px;
    }
  }

  .left {
    background-color: #3366CC;
    color: #fff;
    height: 100%;
    font-size: 26px;
    text-align: center;
    line-height: 75px;
    position: absolute;
    left: 0;
    top: 0;
    width: 229px;
    box-sizing: border-box;

    .img-wrap {
      width: 230px;
      height: 70px;
      padding: 24px;
      padding-top: 16px;
      box-sizing: border-box;

      img {
        width: 100%;
      }
    }
  }

  .welcome-tips {
    padding-left: 10px;
    margin-left: 230px;
    width: 260px;
    font-size: 14px;
    color: #000;
  }

  .el-col-18 {
    padding-left: 16%;
  }
}



.el-dropdown {
  margin-right: 50px;
}
.el-dropdown-link {
  position: relative;
  width: 120px;
  display: flex;
  -webkit-display: flex;
  align-items: center;
  -webkit-align-items: center;
  cursor: pointer;
  color: #fff;

  span {
    color: #fff;
  }
  p {
    color: #000;
  }

  img {
    position: relative;
    margin-right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
}

//客服介入
.customer-join {
  cursor: pointer;
  color: rgb(0, 153, 255);
}
</style>
